<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="__STATIC_URL__/static/js/jquery-2.1.4.min.js"></script>
    <style type="text/css">
        *{ margin:0px; padding:0px; text-decoration:none; font-family:"微软雅黑"; font-size:12px;color:Black;}
        .tag{width:400px;height:400px;border:1px solid gray;border-radius:3px;box-shadow:0px 0px 30px gray;}
        .top{width:400px;height:30px;}
        .top ul {width:400px;height:30px;overflow:hidden; margin:0px; padding:0px;}
        .top ul li{width:100px; height:30px; display:block; float:left;}
        .top ul li a {width:100px; height:30px; line-height:30px;display:inline-block; text-align:center;}
        .on{color:#ff6600 !important; font-weight:600;}
        .slide{width:400px;height:10px; overflow:hidden; position:relative;}
        .slide_01{width:100px; height:10px; position:absolute;top:0px;left:0px;}
        .slide_01_01{width:100px; height:3px; background:#ff6600;}
        .slide_01_02{width:0px; height:0px; border-width:5px; border-color:#ff6600 #fff #fff #fff; margin:0 auto; border-style:solid dashed dashed dashed;}
        .text{ width:400px; height:360px;}
    </style>
</head>
<body>
<div class="tag">
    <div class="top">
        <ul class="tagTop">
            <li><a href="#" class="on">画册</a></li>
            <li><a href="#">优惠券</a></li>
            <li><a href="#">会员卡</a></li>
            <li><a href="#">友情链接</a></li>
        </ul>
    </div>
    <div class="slide">
        <div class="slide_01">
            <div class="slide_01_01"></div>
            <div class="slide_01_02"></div>
        </div>
    </div>
    <div class="text"></div>
</div>
<script type="text/javascript">
    $(function () {
        $.fn.tag = function (options) {
            var o = $.extend({}, options || {});
            var tagTop = $(o.tagTop);
            var slide = $(o.slide);

            //Index 拿到 Ul li  的Index, 移动slide
            var slideMove = function (Index) {
                slide.stop().animate({ left: 100 * Index + "px" }, 1000, function () {
                });
            };
            var tagMouseover = function () {
                tagTop.children("li").mouseenter(function () {
                    tagTop.children("li").find("a").removeClass("on");
                    $(this).children("a").addClass("on");
                    var Index = $(this).index();
                    slideMove(Index);
                });
            };
            tagMouseover();
        };
        $(window).load(function () {
            $(".tag").tag({
                tagTop: ".tagTop",
                slide: ".slide_01",
                text: ".text"
            });
        });
    });
</script>
</body>
</html>

